<template>
  <a-tag :color="tagProps.color">{{ tagProps.text }}</a-tag>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    okText: string
    noText: string
    okValue: number | string | boolean
    noValue: number | string | boolean
    value: any
  }>(),
  {
    okText: '启用',
    noText: '禁用',
    okValue: 1,
    noValue: 0,
  },
)

const tagProps = computed(() => {
  const { okText, noText, okValue, noValue, value } = props
  if (value === okValue)
    return {
      text: okText,
      color: 'green',
    }
  else if (value === noValue)
    return {
      text: noText,
      color: 'gray',
    }
  else
    return {
      text: 'Not Recognize',
      color: 'orange',
    }
})
</script>
